<template>
	<div class="dh_jmhy_balance_details">
		
		<div class="d_j_b_d-icon" @click="back" title="返回上一步操作"></div>
		<div class="d_j_b_d-list">
			<div class="d_j_b_d-list-title">
				
				<div v-if="id.key === 1">
					<div>会员号</div>
					<div>会员名称</div>
					<div>手机号</div>
					<div>结算金额</div>
					<div>结算时间</div>
				</div>
				
				<div v-else>
					<div>订单号</div>
					<div>入单金额</div>
					<div>入单时间</div>
					<div>推荐结算金额</div>
					<div>操作</div>
				</div>

			</div>
			<!-- 列表数据 -->
			<div class="d_j_b_d-list-details">
				<div class="d_j_b_d-l-det-son" v-for="(item,key) in listdetails" :key="key" v-if="id.key === 1">
					<div>{{item.user_id}}</div>
					<div>{{item.real_name}}</div>
					<div>{{item.phone}}</div>
					<div>{{item.money}}</div>
					<div>{{item.time*1000 | formatDate}} {{item.time*1000 | formatDateBehind}}</div>
				</div>
				
				<div class="d_j_b_d-l-det-son" v-for="(items,keys) in listdetails" :key="items.id" v-if="id.key === 2"><!--   -->
					<div>{{items.id}}</div>
					<div>{{items.pre_deposit}}</div>
					<div>{{items.time*1000 | formatDate}} {{items.time*1000 | formatDateBehind}}</div>
					<div>{{items.now_money - items.pre_deposit}}</div>
					<!-- 结算按钮，包括弹窗 -->
					<div class="d_j_b_d-l-d-s-btn">
						
						<!-- 点击的赋值可以写成个函数，用于区分点击的对象  dialogFormVisible = true-->
						<el-button @click="visible(items.id,keys,items.money,items.id)">结算</el-button>
						
						<!-- :visible.sync="dialogFormVisible" 用vue的。sync方法关闭弹窗的 -->
						<el-dialog title="登录" :visible.sync="dialogFormVisible"  center :append-to-body='true' :lock-scroll="false" width="350px">
							
							<div class="block">
							    <span class="demonstration">结算时间</span>
								<!-- value-format方法直接在标签中把用户输入日期装换成24小时的中国时间 -->
							    <el-date-picker value-format="yyyy-MM-dd" v-model="value" type="date" placeholder="选择日期"></el-date-picker>
							</div>
							
							<div class="d_j_b_dlds-btn-money">
								<span>结算金额</span>
								<el-input class="d_j_b_dlds-b-m-price" v-model="input" max="220px" placeholder="结算金额"></el-input>
							</div>
						
							<div class="d_j_b_dlds-btn-confirm">
								<el-button type="primary" @click="refer">确定</el-button>
								
							</div>
							
						</el-dialog>
						
						<el-button class="djs-ldsb-red">取消</el-button>
					</div>

				</div>

			</div>
		</div>
		

	</div>
</template>

<script>
	import {date} from '../js/time.js';  			 //用于时间戳转换时间
	import {timetamp} from '../js/time.js'		 //用户日期转时间戳
	import {formatDate} from '../js/time.js';		 //直接在标签中转化时间的方法
	export default{
		data(){
			return{
				dialogFormVisible: false,	//弹出层时间的状态
				value: '',					//组件input框日期组件绑定的动态值
				input: '',					//组件金额输入框的双向绑定的动态值
				login: 0,
				id: {},
				loca: {},
				listdetails:[]
			}
		},
		//过滤器
		filters: {
		    formatDate(time) {							 //日期(年月日)
		        var date = new Date(time);
		        return formatDate(date, 'yyyy-MM-dd');   //年月日 格式自己定义   'yyyy : MM : dd'  例 2018年12月5日的格式
		    },
		    formatDateBehind(time) {					 //时间(时分秒)
		        var date = new Date(time);
		        return formatDate(date, 'hh:mm:ss');     //时间点 例 21点12分12秒的格式
		    }
		},
		methods: {
			back(){
				this.$router.go(-1);//返回上一层
			},
			//跳转后自动获取的数据
			detailsrequest(){
				let that = this
				let api,data
				const axios = require('axios')
				// console.log(that.id.key,that.id.id)
				//1为已计算
				if(that.id.key == 1){
					api = '/api/api/dh_jm/business_finish.php';
					// dataid = "id"
					data = {
						name: that.login.uname,
						password: that.login.pwd,
						id: that.id.id
					}
				}else{
					api = '/api/api/dh_jm/business_unsettled_user.php';
					// dataid = "user_id"
					data = {
						name: that.login.uname,
						password: that.login.pwd,
						user_id: that.id.id
					}
				}
				//接口验证的数据				
				let updata = JSON.stringify(data)
				axios({
					method: 'post',
					url: api,
					header: { "Content-Type": "application/JSON" },
					data: updata
				})
				.then( resp=> {
					let data = resp.data.data
					//1为已结算，内部循环后找到对应条件的数据赋值给页面循环的数组
					if(that.id.key == 1){
						for(var q=0;q<data.length;q++){
							if(that.id.id == data[q].user_id){
								// console.log(that.id.id == data[q].user_id)
								that.listdetails.push(data[q])
							}
						}
					}else{
						// console.log(resp)
						that.listdetails = resp.data.data
						// for(var q=0;q<data.length;q++){
						// 	if(that.id.id == data[q].id){
						// 		console.log(that.id.id == data[q].id)
						// 		that.listdetails.push(data[q])
						// 		console.log(that.listdetails)
						// 	}
						// }
					}
				})
				.catch( err=> {console.log(err)})	
			},
			//结算的弹窗按钮，父级能拿到循环的值，location就是拿到的id，
			//在结算弹窗结算用this.location,结算按钮直接用key
			visible(id,key,money,user_id){
				let that = this
				that.loca.id = id     //上传的user_id的值
				that.loca.sub = key   //页面数据的下标，用于结算寻找数据位置
				that.loca.user = user_id
				that.dialogFormVisible = true  //弹窗
			},
			//结算的弹窗，用于上传结算信息
			refer(){
				let that = this
				let key = that.loca.sub  //结算数据的在页面的下标
				// console.log(that.loca,that.input)
				const axios = require("axios")
				//结算必须有有时间和金额，否则不执行
				if(that.input !== "" && that.value !== ""){
					let d = timetamp(that.value)
					that.dialogFormVisible = false
					
					//接口数据更新，结算金额小于等于推荐结算金额生效
					// if(Number(that.input) <= that.loca.money){
					let data = {
						name: that.login.uname,
						password: that.login.pwd,
						user_id: that.id.id,
						order_id: that.loca.user,
						time: d,
						money: that.input
					}
					let updata = JSON.stringify(data)
					// console.log(updata)
					axios({
						method: 'post',
						url: '/api/api/dh_jm/business_settled.php',
						header: {"Content-Type": "application/JSON"},
						data: updata,
					})
					.then( resp=> {
						// console.log(resp)
						that.listdetails[key].now_money =  that.listdetails[key].now_money - that.input
						that.input = ""
						that.value = ""
					 	//结算的提示弹窗
						this.$confirm('结算成功', {
							// confirmButtonText: '确定',
							cancelButtonText: false,
							showCancelButton: false
						}).then(() => {
							this.$message({
								type: 'success',
								message: '佣金已结算'
							});
						}).catch(() => {
							// this.$message({
							// 	type: 'info',
							// 	message: '已取消删除'
							// });          
						});			
					})
					.catch( err=> {console.log(err)})

					// }else{alert("结算金额不能大于推荐结算金额")}
					
				}else{alert("结算时间和结算金额不能为空")}
			}
		},
		mounted() {
			let that = this
			that.login = JSON.parse(sessionStorage.getItem("dh_jmhylogin"))
			
			// console.log(that.id)
			that.id.id = that.$route.query.id
			that.id.key = Number(that.$route.query.key)
			that.detailsrequest()
		}
	}
</script>

<style>
	/* 子路由的最外层盒子 */
	.dh_jmhy_balance_details{
		width: 100%;
		height: 100%;
		/* margin: auto; */
		padding: 20px;
	}
	.d_j_b_d-icon{
		width: 20px;
		height: 20px;
		margin: 10px;
		background: url(../assets/return.png);
		transform: translate(-10px,-15px);
	}
	/* 列表的类名样式 */
	.d_j_b_d-list{
		font-size: 14px;
		background-color: white;
		border: 1px solid #cecece;
		border-radius: 5px;
	}
	/* 列表每一项的标题 */
	.d_j_b_d-list-title>div{
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		/* grid-auto-rows: 50px; */
		/* grid-template-columns: 13% 13% 15% 15% 12% 20% 12%; */
		padding: 15px 0;
		background-color: #dddddd;
	}
	/* 列表数据样式 */
	.d_j_b_d-list-details>.d_j_b_d-l-det-son{
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-auto-rows: 50px;
		/* grid-template-columns: 13% 13% 15% 15% 12% 20% 12%; */
		/* padding: 15px 0; */
	}
	.d_j_b_d-list-details>div{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.d_j_b_d-list-details>.d_j_b_d-l-det-son:nth-child(even){
		background-color: #e1e1e1;
	}

	/* 结算按钮，包括弹窗的样式 */
	.d_j_b_d-l-d-s-btn{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.d_j_b_d-l-d-s-btn>button{
		color: white;
	}
	.el-button--default{
		background-color: #409eff;
	}
	.djs-ldsb-red{
		background-color: #f56c6c;
	}
	/* 弹窗金额的样式修改，不稳定容易乱跳 */
	.el-dialog__body{
		text-align: center;
	}
	.block,.d_j_b_dlds-btn-money{
		text-align: center;
		margin-bottom: 30px;
	}
	.el-button{
		padding: 10px 15px;
	}
	.el-button+.el-button{
		margin: 0;
	}
	.d_j_b_dlds-b-m-price{
		width: 220px;
	}
	.d_j_b_dlds-btn-confirm{
		text-align: center;
	}
	/* 金额框的样式修改 */
	.el-message-box{
		width: 300px;
	}
	.el-message-box__content{
		text-align: center;
		line-height: 120px;
	}
	.el-message-box__btns{
		text-align: center;
	}
</style>
